﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <!--Main style css-->
    <link th:href="@{/static/assets/css/style.css}" rel="stylesheet">
    <!--Color css-->
    <link th:href="@{/static/assets/css/colors/default-colors.css}" rel="stylesheet">
    <!--Responsive style css-->
    <link th:href="@{/static/assets/css/responsive.css}" rel="stylesheet">
    <!-- JS -->
    <!--jQuery 1.12.4 google link-->
    <script th:src="@{/static/assets/js/jquery.min.js}"></script>
</head>
<body class="bodypadding">
<!--快速返回顶层-->
<div class="scroll_up gutengard_btn"><i class="icon-up-open-big"></i></div><!--END ScrollTop Btn-->
<!--搜索框引入-->
<div th:replace="../templates/commons/search::#main_search"></div>
<!--侧边框引入-->
<div th:replace="../templates/commons/floatBar::#main_floatBar"></div>
<!--导航栏引入-->
<div th:replace="../templates/commons/header::#main_header"></div>

<!--页面导航-->
<div class="main_slider_post_cat">
    <!--part1:最好看博文推荐轮播-->
    <div class="lateps_postslides">
        <div class="latestposts_slider owl-carousel">

            <div class="item postbgslide1" th:each="limit3ByLike:${likeCountLimit3}"
                 th:style="'background-image:url('+${limit3ByLike.articleCover}+');'">
                <!-- 年月日 -->
                <div class="post_data_cr">
                    <span class="day" th:text="${limit3ByLike.articleDate.substring(8,10)}"></span>
                    <div class="month" th:text="${limit3ByLike.articleDate.substring(5,7)}+'月'"></div>
                    <div class="year" th:text="${limit3ByLike.articleDate.substring(0,4)}"></div>
                </div>
                <!--正文-->
                <div class="post_info_wrapper" style="height: auto;overflow: hidden">
                    <!--1.标题-->
                    <h2 class="post_name" style="letter-spacing: 2px">[[${limit3ByLike.articleTitle}]]</h2>
                    <!--2.正文简介-->
                    <div class="short_desc_post" style="font-size: 17px;max-height: 100px;overflow: hidden;"
                         th:utext="${limit3ByLike.articleContent}"></div>
                    ...
                    <!--3.查看详情-->
                    <div class="seea_more">
                        <a th:href="${#httpServletRequest.contextPath}+'/single/'+${limit3ByLike.articleId}">查看详情 <i
                                class="icon-right-open-big"></i></a>
                    </div>
                </div>
                <img alt="" src="../assets/images/postimagebox.png">
            </div>
            <!--Slider Latest Post-->
        </div>
    </div><!--最新博文推荐END-->
    <!--part2:最新博文轮播-->
    <div class="lateps_postslides">
        <div class="latestposts_slider owl-carousel">

            <div class="item postbgslide1" th:each="limit3OrderDate:${newCreateLimit3}"
                 th:style="'background-image:url('+${limit3OrderDate.articleCover}+');'">
                <!-- 年月日 -->
                <div class="post_data_cr">
                    <span class="day" th:text="${limit3OrderDate.articleDate.substring(8,10)}"></span>
                    <div class="month" th:text="${limit3OrderDate.articleDate.substring(5,7)}+'月'"></div>
                    <div class="year" th:text="${limit3OrderDate.articleDate.substring(0,4)}"></div>
                </div>
                <!--正文-->
                <div class="post_info_wrapper" style="height: auto;overflow: hidden">
                    <!--1.标题-->
                    <h2 class="post_name" style="letter-spacing: 2px">[[${limit3OrderDate.articleTitle}]]</h2>
                    <!--2.正文简介-->
                    <div class="short_desc_post" style="font-size: 17px;max-height: 100px;overflow: hidden;"
                         th:utext="${limit3OrderDate.articleContent}"></div>
                    ...
                    <!--3.查看详情-->
                    <div class="seea_more">
                        <a th:href="${#httpServletRequest.contextPath}+'/single/'+${limit3OrderDate.articleId}">查看详情 <i
                                class="icon-right-open-big"></i></a>
                    </div>
                </div>
                <img alt="" src="../assets/images/postimagebox.png">
            </div>
            <!--Slider Latest Post-->
        </div>

    </div>
</div>
<!--END Big SLider-->

<div class="page_container_wrapper">
    <div class="container-fluid no_padding scrollanimation" data-animation="fadeIn" data-timeout="200">
        <div class="blog_list_post clearfix">
            <!-- 博文展示框 -->
            <div class="blog_post_box clearfix" style="height: 400px;margin-right: 0.5%;margin-left: 0.5%;margin-bottom: 15px;width: 49%" th:each="allArticle:${allArticleVOList}">

                <!--第一部分：相关文字-->
                <div class="blog_post_item" style="border: 1px solid #e6e6e6" >
                    <!--1.博文标题-->
                    <h2 class="post_name" >
                        <a style="font-size: 20px" th:href="${#httpServletRequest.contextPath}+'/single/'+${allArticle.articleId}" th:text="${allArticle.articleTitle}"></a>
                    </h2>
                    <div class="post_data">

                        <span class="category"><a th:href="'/category_subpage/'+${allArticle.categoryId}" style="max-width: 115px;overflow: hidden;text-decoration: none;color: #073b43;font-size: 13px;" th:title="${allArticle.categoryName}">[[${allArticle.categoryName}]]</a></span>
                        <!--2.留言人数-->
                        <span class="comments_count"><i class="fas fa-comments"></i> [[${allArticle.articleCommentCount}]]</span>
                        <span class="reviews_count"><i class="fas fa-eye"></i> [[${allArticle.articleViews}]]</span>
                        <span class="reviews_count"><i class="iconfont icons-xihuan"
                                                       style="font-size: 14px;margin-left: 5px;margin-right: 5px;"></i> [[${allArticle.articleLikeCount}]]</span>
                    </div>
                    <!--3.博文内容-->
                    <div class="short_desc_post">
                        <div class="short_desc_post_p1" id="content_p" th:utext="${allArticle.articleContent}"></div>
                    </div>
                    <div class="seea_more">
                        <a th:href="${#httpServletRequest.contextPath}+'/single/'+${allArticle.articleId}">查看详情 <i class="icon-right-open-big"></i></a>
                    </div>
                </div>
                <!--第二部分：封面图片-->
                <div class="blog_post_item_image" th:style="'background-image: url('+${allArticle.articleCover}+')'">
                    <div class="post_data_cr">
                        <span class="day" th:text="${allArticle.articleDate.substring(8,10)}"></span>
                        <div class="month" th:text="${allArticle.articleDate.substring(5,7)}+'月'"></div>
                        <div class="year" th:text="${allArticle.articleDate.substring(0,4)}"></div>
                    </div>
                    <a class="post_link_image"
                       th:href="${#httpServletRequest.contextPath}+'/single/'+${allArticle.articleId}">
                        <img alt="" src="../assets/images/postimagebox.png">
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>


<!--引入尾部之前的图片横栏-->
<div th:replace="../templates/commons/beforeFooter::#main_beforeFooter"></div>
<!--引入尾部-->
<div th:replace="../templates/commons/footer::#main_footer"></div>

<!--Bootstrap 4.1.0-->
<script th:src="@{/static/assets/libs/bootstrap-4.1.0/bootstrap.min.js}"></script>
<!--jquery.magnific-popup-->
<script th:src="@{/static/assets/libs/jquery.magnific-popup/jquery.magnific-popup.min.js}"></script>
<!--OWL Carousel-->
<script th:src="@{/static/assets/libs/owlcarousel2-2.3.4/owl.carousel.min.js}"></script>
<!--Custom js-->
<script th:src="@{/static/assets/js/custom.js}"></script>

</body>
</html>